<template>
	<tm-fullView>
		<c-menubars :showback="false" color="gray" :flat="true">
			<template slot="default">
				<view></view>
			</template>
		</c-menubars>
		<tm-sheet :flat="true" :margin="[0, 0]" color="gray">
			<view class="px-20 my-30">
				<view class="">
					<view class="flex flex-between">
						<view>
							<view>
								<text class="text-size-xxl text-black text-weight-b" :class="[black_theme ? 'text-grey-lighten-1' : '']">李天瑞</text>
							</view>
							<view>
								<text class="text-size-s text-black" :class="[black_theme ? 'text-grey-lighten-1' : '']">我喜欢读书看电影照相旅行</text>
							</view>
						</view>
						<view class="pr-30">
							<image :src="avatar" :width="112" :height="112" :round="24" class="avatar rounded" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="px-50 my-50">
				<view class="flex flex-between px-20">
					<template v-for="(item, index) in numberList">
						<view class="text-align-center line-height-number">
							<view>
								<text class="text-size-xl text-weight-b text-black title-number" :class="[black_theme ? 'text-grey-lighten-1' : '']">{{ item.number }}</text>
							</view>
							<view>
								<text class="text-size-s" :class="[black_theme ? 'text-grey-darken-1' : 'text-grey-darken-3']">{{ item.desc }}</text>
							</view>
						</view>
					</template>
				</view>
			</view>
			<tm-sheet :shadow="0" :height="174" :margin="[0, 0]" :padding="[0, 0]" :round="5" classname="pink">
				<view class="flex-center pl-30 pr-50" style="height: 174rpx;">
					<view class="flex-between fulled pr-50">
						<template v-for="(item, index) in accountNumberList">
							<view class="fulled-height pr-50" :class="[black_theme ? 'text-grey-lighten-1' : '']">
								<view>
									<text class="text-size-lg text-white text-weight-b">{{ item.title }}</text>
								</view>
								<view>
									<text class="text-size-xxl text-white text-weight-b">{{ item.number }}</text>
									<text class="text-size-s text-white pl-10">{{ item.desc }}</text>
								</view>
							</view>
						</template>
					</view>
				</view>
			</tm-sheet>
			<view class="my-50 px-20">
				<c-title title="我的功能"></c-title>
			</view>
			<view>
				<template v-for="(item, index) in itemList">
					<tm-listitem :shadow="0" color="gray" :title="item.title" :value="item.value" :margin="[0, 0]" :padding="[20, 30]" :left-icon="item.leftIcon" :left-icon-size="48" show-left-icon left-icon-color="black"></tm-listitem>
				</template>
			</view>
		</tm-sheet>
	</tm-fullView>
</template>

<script>
	export default {
		data() {
			return {
				avatar: "https://img.js.design/assets/smartFill/img331164da748e08.jpg",
				numberList: [{
					number: 400,
					desc: "关注"
				}, {
					number: 100,
					desc: "粉丝"
				}, {
					number: 499,
					desc: "喜欢"
				}],
				accountNumberList: [{
					title: "账户",
					number: 17,
					desc: "金币"
				}, {
					title: "收入",
					number: 20,
					desc: "金币"
				}],
				itemList: [{
					title: "我的动态",
					value: "查看动态",
					leftIcon: "/static/mine/wddt_icon.png"
				}, {
					title: "系统消息",
					value: "",
					leftIcon: "/static/mine/xtxx_icon.png"
				}, {
					title: "我的收藏",
					value: "添加收藏",
					leftIcon: "/static/mine/wdsc_icon.png"
				}, {
					title: "统计数据",
					value: "",
					leftIcon: "/static/mine/tjsj_icon.png"
				}, {
					title: "金币商店",
					value: "",
					leftIcon: "/static/mine/jbsd_icon.png"
				}]
			}
		},
		computed: {
			black_theme: function() {
				return this.$tm.vx.state().tmVuetify.black;
			}
		},
	}
</script>

<style>
	.avatar {
		width: 112rpx;
		height: 112rpx;
	}
	.account-bg {
		background-color: rgba(255, 107, 132, 1);
		background-image: linear-gradient(136.25deg, rgba(255, 107, 132, 1) 0%, rgba(255, 107, 169, 1) 100%);
	}
</style>
